<template>
    <div>
      <!-- 搜索结果页-头部导航 -->
      <div class="search-result-container">
        <!-- 点击实现后退效果 -->
        <van-nav-bar
          title="搜索结果"
          left-arrow
          @click-left="$router.go(-1)"
          fixed
        />
        <!-- 向前面的一样 下拉加载更多 -->
        <van-list
        offset="50"
       v-model="loading"
      :finished="done"
      finished-text="没有更多了"
      :immediate-check="false"
       @load="onLoad">
   <artcile-list :List="resultList" :showClooss="false"></artcile-list>
       </van-list>
      </div>
    </div>
</template>

<script>
import { getSearchApi } from '@/api/search'
export default {
  name: 'Result',
  data () {
    return {
      // 保存获取到的搜索结果列表的数组
      resultList: [],
      // 是否加载当期页面
      loading: false,
      // 全部加载完毕执行的
      done: false
    }
  },
  // created 钩子函数当组件一创建就会执行,没有缓存的情况下
  activated () {
    // 但使用缓存之后 页面一加载就只是加载那一次 后面去缓存中每次重复的内容
    this.done = false
    this.loading = false
    this.resultList = [] // 每次页面一加载就将上次请求的数据 清空重置为初始值
    // 不在模版中展示 就在当前组件对象上相当于是加一个属性 这个对象就是this
    // 定义初始页码
    this.page = 1
    // 页面一加载就展示出来数据
    this.loadingUpFn()
  },
  methods: {
    async loadingUpFn () {
      const resp = await getSearchApi({ keyword: this.$route.params.keyword, page: this.page++ })
      const { results } = resp.data
      // 接收一哈
      // 当新数组内有数组的时候就表示全部加载完成
      if (results.length === 0) {
        this.done = true
        this.resultList = [...this.resultList, ...results]
        return
      }
      // 旧的数组跟新数组合并在一起 让数据驱动视图
      this.resultList = [...this.resultList, ...results]
      // 每次触底就把当前页加载设置为false
      this.loading = false
    },
    // 当页面触底的时候触发的函数
    onLoad () {
      // 触底加载跟多的数据哈
      this.loadingUpFn()
    }
  }

}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
